/*
 * @Description: 
 * @Author: Zhang Zhangda
 * @Date: 2021-03-03 19:54:40
 * @LastEditTime: 2021-03-09 15:00:35
 * @LastEditors: Zhang Zhaoda
 */
import showExcal from "./showexcal.less";
import { useSelector, useDispatch } from "react-redux";
import { FC, useState } from "react";
import { ExcalModelState, QuestionsInter, UserModelState } from "umi";
import { Tag, Form, Select, Button,Empty } from "antd";
const { Option } = Select;
import {search} from "@/interface/excal.interface"
//引入表单组件
import FormItem from "../components/Form"
interface Istore {
  excal: ExcalModelState
}
interface ILoginStore {
  login: UserModelState
}
const ShowExcal: FC = () => {
  let [editFlag, setEditFlag] = useState<boolean>(false)
  let { Questions, allQuestionsType, allSubject, keys } = useSelector(({ excal }: Istore) => excal);
  let { userInfo } = useSelector(({ login }: ILoginStore) => login);
  let [defaultValues, setDefaultValues] = useState({});
  
  let dispatch = useDispatch()
  const [form] = Form.useForm();
  const [form1] = Form.useForm();
  
  //编辑试题函数
  let editQuestion = (item: QuestionsInter) => {
    let { title,
      exam_name,
      questions_stem,
      questions_type_text,
      subject_text,
      questions_answer
    } = item
    setDefaultValues({
      title,
      questions_stem,
      questions_answer,
      exam_id: exam_name,
      subject_id: subject_text,
      questions_type_id: questions_type_text
    })
    //显示编辑页面
    setEditFlag(true)

  }

  //表单事件
  //form表单事件

  const onFinish = (values: any) => {
    
    //添加试题
    dispatch({
      type: 'excal/upDateQuestions',
      payload: { ...values, user_id: userInfo.user_id }
    });
    setEditFlag(false)

  };
  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };


  const onFinishs = (values: any) => {
    //模糊搜索
    // exam_id: "周考1"
    // subject_id: "javaScript下"
    // console.log(values);
    
    Dispatch(values)
    form1.resetFields();
    

  };
  const onFinishFaileds = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  
  
  const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };

  // //tab切换
  
  const changeTab = (values: string) => {
    
    let item=allSubject.find(item=>{
      return item.subject_text===values
    })
    
    Dispatch({subject_id:item?.subject_id})
  }

  const Dispatch=(payload:search)=>{
    dispatch({
      type:'excal/changeTab',
      payload
    })
  }
 
  return (
    <div  className={showExcal.showExcal}>
      <div>
        <ul className={showExcal.head}>
          <li>
            <span>课程类型:</span>
            <span>
              <span style={{ cursor: 'pointer' }} onClick={() => changeTab('All')}>All</span>
              {
                keys && keys.map((item, index) => {
                  return <span style={{ cursor: 'pointer' }} key={item + index} onClick={() => changeTab(item)}>{item}</span>
                })
              }
            </span>
          </li>
          <li>
            <Form
              {...layout}
              name="basic"
              form={form1}
              style={{ display: 'flex' }}
              initialValues={{ remember: true }}
              onFinish={onFinishs}
              onFinishFailed={onFinishFaileds}
            >

              <Form.Item
                label="考试类型"
                name="exam_id"
                style={{ width: '15%', textAlign: 'left' }}
                wrapperCol={{ span: 24 }}
              >
                <Select style={{ boxShadow: '1px 1px 5px #ccc' }}>
                  {
                    allQuestionsType.length !== 0 ?
                      allQuestionsType.map((item, index) => {
                        return (
                          <Option
                            value={item.exam_id}
                            key={item.exam_id}
                          >
                            {item.exam_name}
                          </Option>
                        )
                      }) : null
                  }
                </Select>
              </Form.Item>

              <Form.Item
                label="题目类型"
                name="subject_id"
                style={{ width: '30%' }}
                wrapperCol={{ span: 9 }}
              >
                <Select style={{ boxShadow: '1px 1px 5px #ccc' }}>
                  {
                    allSubject && allSubject.length !== 0 ?
                      allSubject.map((item, index) => {
                        return (
                          <Option
                            value={item.subject_id}
                            key={item.subject_id}
                          >
                            {item.subject_text}
                          </Option>
                        )
                      }) : null
                  }
                </Select>
              </Form.Item>


              <Form.Item >
                <Button type="primary" htmlType="submit">
                  提交
                      </Button>
              </Form.Item>
            </Form>
          </li>
        </ul>
        <div className={showExcal.main}>
          <ul className={showExcal.list}>
            {
              Questions.length ? Questions.map((item) => {
                return (
                 <li key={item.questions_type_id + item.questions_id}>
                    <div>
                      <span>{item.title}</span>
                      <span style={{ cursor: 'pointer' }} onClick={() => editQuestion(item)}>编辑</span>
                    </div>
                    <Tag color='blue'>{item.questions_type_text}</Tag>
                    <Tag color='geekblue'>{item.subject_text}</Tag>
                    <Tag color='orange'>{item.exam_name}</Tag>
                    <div>{item.user_id}发布</div>
                  </li>
                )
              
              }):<Empty description={'暂无数据'} />
            }
          </ul>

        </div>
        {/* 编辑页面 */}
        {
          editFlag ?
            <div className={showExcal.form}>
              <FormItem
                defaultValue={defaultValues}
                form={form}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
              />
            </div>
            : null
        }
      </div>
    </div>
  );
}

export default ShowExcal

function title(title: any) {
  throw new Error("Function not implemented.");
}
